<template>
 <div class="sourceBox">
  <div class="centTitle">{{$attrs.source}}</div>
<ul class="centbox" v-if="$attrs.source==='个人信息'">
              <li>
                <div>用户名称</div>
                <div class="ownRight">{{ user.username }}</div>
              </li>
              <li>
                <div>手机号码</div>
                <div class="ownRight">{{ user.mobile }}</div>
              </li>
              <li>
                <div>用户邮箱</div>
                <div class="ownRight">{{ user.email }}</div>
              </li>
              <li>
                <div>所属部门</div>
                <div class="ownRight" v-if="user.dept">{{ user.dept.name }}</div>
              </li>
              <li>
                <div>所属岗位</div>
                <div class="ownRight" v-if="user.posts">{{ user.posts.map(post => post.name).join(',') }}</div>
              </li>
              <li>
                <div>所属角色</div>
                <div class="ownRight" v-if="user.roles">{{ user.roles.map(role => role.name).join(',') }}</div>
              </li>
              <li>
                <div>创建日期</div>
                <div class="ownRight">{{ parseTime(user.createTime) }}</div>
              </li>
            </ul>
            <div v-if="$attrs.source==='基本资料'">
              <van-form @submit="onSubmit" ref="baseForm">
  <van-cell-group inset>
    <van-field
      v-model="user.nickname"
      name="nickName"
      label="用户昵称"
      placeholder="请输入用户昵称"
      :rules="[{ required: true, message: '请输入用户昵称' }]"
    />
    <van-field
      v-model="user.mobile"
      name="mobile"
      label="手机号码"
      placeholder="请输入手机号码"
      :rules="[{ pattern, message: '请输入正确手机号码' }]"
    />
    <van-field
      v-model="user.email"
      name="email"
      label="邮箱"
      placeholder="请输入邮箱"
      :rules="[{ validator, message: '请输入正确邮箱' }]"
    />
    <van-field
  v-model="sexvalue"
  is-link
  readonly
  name="sex"
  label="性别"
  placeholder="点击选择性别"
  @click="setSexBtn"
/>
<van-popup v-model="showsex" position="bottom">
  <van-picker
  show-toolbar
    :columns="columns"
    @confirm="confirmsex"
    @cancel="showsex = false"
    :default-index="cursex"
  />
</van-popup>
   
  </van-cell-group>
  
</van-form>
<div class="passbtnclass">
  <el-button round @click="closeBase" size="medium" style="width:100px;">关闭</el-button>
  <el-button type="primary" round @click="submitBase" size="medium" style="width:100px;">保存</el-button>
  </div>
            </div>
            <div v-if="$attrs.source==='修改密码'">
              <van-form @submit="onSubmitPassWord" ref="basePasswordForm">
  <van-cell-group inset>
    <van-field
      v-model="userPassword.oldPassword"
      name="oldPassword"
      label="旧密码"
      placeholder="请输入旧密码"
      :rules="[{ required: true, message: '请输入旧密码' }]"
    />
    <van-field
      v-model="userPassword.newPassword"
      name="newPassword"
      label="新密码"
      placeholder="请输入新密码"
      :rules="[{ validator:passvalidator, message: '密码应包含大写字母，小写字母，数字,特殊字符,且不少于8位' }]"
    />
    <van-field
      v-model="userPassword.confirmPassword"
      name="confirmPassword"
      label="确认密码"
      placeholder="请输入确认密码"
      :rules="[{ validator:passconfirm, message: passmessage }]"
    />
    
  </van-cell-group>
  
</van-form>
<div class="passbtnclass">
  <el-button round @click="closeBase" size="medium" style="width:100px;">关闭</el-button>
  <el-button type="primary" round @click="submitBasePassword" size="medium" style="width:100px;">保存</el-button>
  </div>
            </div>
          
 </div>
</template>
<script>
import { getUserProfile } from "@/api/system/user";
import { updateUserProfile } from "@/api/system/user";
import { updateUserPwd } from "@/api/system/user";
import { encryption} from "@/utils/auth";
export default {
  props: ['updateText'],
  data() {
    let _that = this;
    return {
      showsex:false,
      columns:['男','女'],
      sexvalue:'',
      cursex:0,
      user:{
      },
      userPassword:{

      },
      pattern:/^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      validator(val){
       return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(val);
      },
      passvalidator(val){
        return /^(?![A-Za-z0-9]+$)(?![a-z0-9_!@#$%^&*()+.]+$)(?![A-Za-z_!@#$%^&*()+.]+$)(?![A-Z0-9_!@#$%^&*()+.]+$)[a-zA-Z0-9_!@#$%^&*()+.]{8,}$/.test(val);
      },
      passconfirm(val){
        
        if(!val){
          return false;
        }else if(val !== _that.userPassword.newPassword){
          return false;
        }else{
          return true;
        }
      },
      passmessage(val,rule){
    
         console.log(val,'mems',rule);
         if(!val){
          return '请输入确认密码'
        }else if(val !== _that.userPassword.newPassword){
          return '两次密码不一致';
        }
      }
    };
  },
  mounted() {
   this.getUser();
  },
  watch: {
    updateText(val){
      this.$nextTick(()=>{
        this.$refs.baseForm && this.$refs.baseForm.resetValidation();
        this.$refs.basePasswordForm && this.$refs.basePasswordForm.resetValidation();
        this.userPassword = {};
      this.getUser();
      });
    }
  },
  methods: {
    confirmsex(value,index){
     console.log(value,'eeeee',index);
     this.cursex = index;
     this.sexvalue = value;
     this.showsex = false;
     this.user.sex = index+1;
    },
    setSexBtn(){
      this.showsex = true
      // if(this.$store.state.mobile.userAgent ==='mobile'){
      //   this.showsex = true
      // }
    },
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
        this.sexvalue = this.user.sex==1?'男':'女'
        this.cursex = this.user.sex-1;
      });
    },
    onSubmit(val){
      console.log(val,'sumboni');
      if(this.$store.state.mobile.userAgent ==='mobile' || this.$store.state.mobile.isJump){
        updateUserProfile(this.user).then(response => {
            this.$modal.msgSuccess("修改成功");
          });
      }
   
    },
    onSubmitPassWord(val){
      console.log(val,'password');
      let oldPassword = encryption(val.oldPassword)
          let newPassword = encryption(val.newPassword)
          updateUserPwd(oldPassword,newPassword).then(
            response => {
              this.$modal.msgSuccess("修改成功");
            }
          );
    },
    closeBase(){
      console.log('cose');
      if(this.$store.state.mobile.userAgent ==='mobile'){
        this.$router.go(-1);
      }
    },
    submitBase(){
      this.$refs.baseForm.submit();
    },
    submitBasePassword(){
      this.$refs.basePasswordForm.submit();

    }
  },
};
</script>

<style lang="less" scoped>
 .sourceBox{
  font-size: 14px;
  .centTitle{
    font-size: 16px;
    height:46px;
    line-height: 46px;
    font-weight: bold;
    text-align: center;
    border-bottom:0.5px solid #e7eaec;
  }
  .centbox{
    margin:0;
    list-style: none;
    padding:0 10px;
    li{
      height:44px;
      display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom:0.5px solid #e7eaec;
    color:#aaa;
    .ownRight{
      color:black;
    }
    }
  }
  .passbtnclass{
    position:absolute;
    width:100%;
    bottom:10px;
    display:flex;
    justify-content: space-between;
    padding:0 5px;
  }
 }
/deep/ .van-cell{
    padding-left: 0;
    padding-right: 0;
  }
 /deep/ .van-field__control{
    text-align: right;
  }
 /deep/ .van-field__error-message{
    text-align: right;
  }
</style>